<template>
  <div class="edit">
    <div class="avatar">
      <van-uploader
        :after-read="coverAfterRead"
        @delete="handleCoverDelete"
        :max-count="1"
        v-model="fileList"
      >
        <van-image round width="1.6rem" height="1.6rem" :src="form.portraitUrl" />
      </van-uploader>
    </div>
    <div class="input-box">
      <van-field label="昵称：" v-model="form.nickname" />
      <van-field label="手机：" v-model="userInfo.phone" :disabled="true">
        <template slot="extra">
          <span>已验证</span>
        </template>
      </van-field>
    </div>
    <div class="submit">
      <my-button name="确定" @btnClick="handleBtnClick" />
    </div>
  </div>
</template>
<script>
import { setUserInfo, upload } from '@/api/my'

const ERR_OK = 200
export default {
  data () {
    return {
      fileList: [],
      form: {
        portraitUrl: '',
        nickname: ''
      }
    }
  },
  created () {
    this.form.nickname = JSON.parse(localStorage.getItem('USER')).nickname
    this.form.portraitUrl = JSON.parse(localStorage.getItem('USER')).portrait_url
  },
  computed: {
    userInfo () {
      const info = this.$store.getters.userInfo
      info.portrait_url = this.form.portraitUrl
      return info
    }
  },
  methods: {
    coverAfterRead (file, detail) {
      const formData = new FormData()
      formData.append('photo', file.file)
      this._upload(formData).then(res => {
        this.form.portraitUrl = res.data.photo
      })
    },
    handleCoverDelete (file) {
      this.form.portraitUrl = ''
    },
    handleBtnClick () {
      if (!this.form.portraitUrl) {
        this.$toast('请上传头像~')
        return
      }
      if (!this.form.nickname) {
        this.$toast('请填写昵称~')
        return
      }
      this._setUserInfo(this.form)
        .then(() => {
          this.$toast('修改成功~')
          const info = this.$store.getters.userInfo
          info.portrait_url = this.form.portraitUrl
          info.nickname = this.form.nickname
          localStorage.setItem('USER', JSON.stringify(info))
          this.$router.back()
          this.$emit('success', info)
        })
    },
    _upload (photo) {
      return upload(photo)
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _setUserInfo ({ phone, portraitUrl, nickname }) {
      return setUserInfo({ phone, portraitUrl, nickname })
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.edit {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.02rem 1.12rem 0.92rem 1.12rem;
  box-sizing: border-box;
  touch-action: none;
  .input-box {
    margin-top: 1.3rem;
    .van-cell {
      padding-left: 0;
      padding-right: 0;
      padding: 15px 0;
      /deep/ .van-field__label {
        width: 1rem !important;
      }
      &::after {
        left: 0;
      }
      &::before {
        left: -10px;
      }
    }
  }
  .submit {
    width: 5.26rem;
    font-size: 0;
    @include hCenter();
    bottom: 1rem;
  }
}
</style>
